<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      height: 3000px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>
<script src="./lodash.js"></script>
<script>
// 单词：
  // bounce - 跳、反弹
  // throttle - 节流阀

// 已学过的BOM事件： resize、scroll、load

// DOM0 级事件
// window.onscroll = function() {
//   console.log('scroll');
// }

// DOM2 级事件
// 需求：resize 改变 视口的大小，改变大小后，要通过 JS  适配 DOM 元素的大小
// window.addEventListener('resize', e => {
//   console.log('resize');
//   // 在回调函数中，写 通过 JS  适配 DOM 元素的大小 的 业务代码
//   // 此处的回调，会在 resize 的时候，返回触发；会极大地消耗性能
//     // 解决思路：resize 的最后，才触发一次回调，最好！
//       // -> 技术方案：节流 与  防抖
// })


//  _.throttle  节流函数：
  // 原理：若 函数 反复被触发，但指挥在 [wait] 时间到达时，才会触发一次。
// const f = _.throttle(() => {
//   console.log('!!scroll');
// }, 1000);
// window.addEventListener('scroll', f);


// _.debounce 防抖函数： 
  // 原理：若函数反复触发(抖动)，不回调函数；直到函数停止触发（抖动），才待[wait]到达后，才会触发一次。
const f = _.debounce(() => {
  console.log('~~scroll');
}, 1000);
window.addEventListener('scroll', f);



// 节流 与 防抖

</script>